<template>
  <div class="set" v-loading="loading" element-loading-text="加载中...">
    <!-- 全局查询 -->
    <el-descriptions :border="true" direction="vertical" :column="1" class="set-table">
      <el-descriptions-item label="全局查询">
        <div class="item flex-justify-between">
          <span>开启后，所有人可以查询所有订单，非自己处理订单也可以</span>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.selectAllOrder" @change="saveSet('all')" />
            <span v-if="form.selectAllOrder">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 结单修改 -->
    <el-descriptions :border="true" direction="vertical" :column="1" class="set-table">
      <el-descriptions-item label="结单修改">
        <div class="item flex-justify-between">
          <span>
            开启后，工单申请结单后，支持添加配件、费用和修改结单回执信息；审核结单后不支持修改；
          </span>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.finishUpdate" @change="saveSet('finish')" />
            <span v-if="form.finishUpdate">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <span>是否允许网点人员修改</span>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch
              :disabled="!form.finishUpdate"
              v-model="form.openRepairAuth"
              @change="saveSet('repair')"
            />
            <span v-if="form.openRepairAuth" :style="{ color: form.finishUpdate ? '#000' : '#999' }"
              >开启</span
            >
            <span v-else :style="{ color: form.finishUpdate ? '#000' : '#999' }">关闭</span>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 报单设置 -->
    <el-descriptions :border="true" direction="vertical" :column="1" class="set-table">
      <el-descriptions-item label="报单设置">
        <div class="item flex-justify-between">
          <h4>重复报单</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.enableRepeatOrder" @change="saveSet('repeat')" />
            <span v-if="form.enableRepeatOrder">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启后，支持重复报单</p>
        <div>
          <el-checkbox
            v-model="form.repeatByMobile"
            :disabled="!form.enableRepeatOrder"
            @change="saveSet('repMobile')"
            >客户报单</el-checkbox
          >
          <el-checkbox
            v-model="form.repeatByService"
            :disabled="!form.enableRepeatOrder"
            @change="saveSet('repService')"
            >总部报单</el-checkbox
          >
        </div>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <h4>重复报单提醒</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.enableRepeatOrderTip" @change="saveSet('repTip')" />
            <span v-if="form.enableRepeatOrderTip">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启后，重复报单时，将会弹窗提醒</p>
        <div>
          <el-checkbox
            v-model="form.repeatByMobileTip"
            :disabled="!form.enableRepeatOrderTip"
            @change="saveSet('repMobileTip')"
            >客户提醒</el-checkbox
          >
          <el-checkbox
            v-model="form.repeatByServiceTip"
            :disabled="!form.enableRepeatOrderTip"
            @change="saveSet('repServiceTip')"
            >总部提醒</el-checkbox
          >
        </div>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <h4>重复报单判断</h4>
        </div>
        <p class="tips">至少选择两个字段进行重复报单判断</p>
        <div class="flex-aligh-center">
          <el-checkbox v-model="form.enableProName" @change="saveSet('proName')">
            产品名称
          </el-checkbox>
          <el-checkbox v-model="form.enableProCode" @change="saveSet('proCode')">
            产品编码
          </el-checkbox>
          <el-checkbox v-model="form.enableProModel" @change="saveSet('proModel')">
            产品型号
          </el-checkbox>
          <el-checkbox v-model="form.enableUserAccount" @change="saveSet('userAccount')">
            客户账号
          </el-checkbox>
          <el-checkbox v-model="form.enableUserName" @change="saveSet('userName')">
            客户姓名
          </el-checkbox>
          <el-checkbox v-model="form.enableUserPhone" @change="saveSet('userPhone')">
            客户手机号
          </el-checkbox>
          <el-checkbox v-model="form.enableUserAddress" @change="saveSet('userAddress')">
            客户地址
          </el-checkbox>
        </div>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <h4>报单携带登记信息</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.carryRegistInfo" @change="saveSet('reg')" />
            <span v-if="form.carryRegistInfo">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启后，报单选择商品时，自动带出关联的登记信息</p>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <h4>申请关联配件</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.showRelationSpare" @change="saveSet('spare')" />
            <span v-if="form.showRelationSpare">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启后，工单申请配件，只显示该商品关联的配件信息</p>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 超时设置 -->
    <el-descriptions :border="true" direction="vertical" :column="1" class="set-table">
      <el-descriptions-item label="超时设置">
        <div class="item flex-justify-between">
          <h4>服务商接单超时</h4>
          <p class="tips">
            当服务商超过
            <el-input
              style="width: 40px"
              v-model.trim.number="form.networkReceiveTimeout"
              @input="timeoutSetSave('networkReceive')"
            />
            个小时未接单，则将工单退回给总部
          </p>
        </div>

        <el-divider style="margin: 10px 0" />

        <div class="item flex-justify-between">
          <h4>服务商派单超时</h4>
          <p class="tips">
            当服务商超过
            <el-input
              style="width: 40px"
              v-model.trim.number="form.networkDispatchTimeout"
              @input="timeoutSetSave('networkDispatch')"
            />
            个小时未派单，则将工单退回给总部
          </p>
        </div>

        <el-divider style="margin: 10px 0" />

        <div class="item flex-justify-between">
          <h4>工程师接单超时</h4>
          <p class="tips">
            当工程师超过
            <el-input
              style="width: 40px"
              v-model.trim.number="form.engineerReceiveTimeout"
              @input="timeoutSetSave('engineerReceive')"
            />
            个小时未派单，工单则自动退回待派单状态
          </p>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, markRaw } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Warning } from '@element-plus/icons-vue'
  import { getWorkSet, saveWorkSet } from '@/api/basic'
  import _ from 'lodash'

  defineOptions({
    name: 'OrderSettingPane',
  })

  const loading = ref(true)
  const props = defineProps({
    active_name: String,
  })

  const form = reactive({
    carryRegistInfo: true,
    enableProCode: false,
    enableProModel: false,
    enableProName: false,
    enableRepeatOrder: false,
    enableRepeatOrderTip: true,
    enableUserAccount: false,
    enableUserAddress: false,
    enableUserName: true,
    enableUserPhone: true,
    finishUpdate: false,
    id: null,
    openRepairAuth: false,
    repeatByMobile: false,
    repeatByMobileTip: true,
    repeatByService: false,
    repeatByServiceTip: true,
    selectAllOrder: true,
    showRelationSpare: true,
    networkReceiveTimeout: 2,
    networkDispatchTimeout: 2,
    engineerReceiveTimeout: 2,
  })

  const checkList = ref([])

  // 获取工单设置
  const getSet = async () => {
    loading.value = true
    await getWorkSet().then((res) => {
      form.carryRegistInfo = res.data.data.row.carryRegistInfo
      form.enableProCode = res.data.data.row.enableProCode
      form.enableProModel = res.data.data.row.enableProModel
      form.enableProName = res.data.data.row.enableProName
      form.enableRepeatOrder = res.data.data.row.enableRepeatOrder
      form.enableRepeatOrderTip = res.data.data.row.enableRepeatOrderTip
      form.enableUserAccount = res.data.data.row.enableUserAccount
      form.enableUserAddress = res.data.data.row.enableUserAddress
      form.enableUserName = res.data.data.row.enableUserName
      form.enableUserPhone = res.data.data.row.enableUserPhone
      form.finishUpdate = res.data.data.row.finishUpdate
      form.id = res.data.data.row.id
      form.openRepairAuth = res.data.data.row.openRepairAuth
      form.repeatByMobile = res.data.data.row.repeatByMobile
      form.repeatByMobileTip = res.data.data.row.repeatByMobileTip
      form.repeatByService = res.data.data.row.repeatByService
      form.repeatByServiceTip = res.data.data.row.repeatByServiceTip
      form.selectAllOrder = res.data.data.row.selectAllOrder
      form.showRelationSpare = res.data.data.row.showRelationSpare
      form.networkReceiveTimeout = res.data.data.row.networkReceiveTimeout
      form.networkDispatchTimeout = res.data.data.row.networkDispatchTimeout
      form.engineerReceiveTimeout = res.data.data.row.engineerReceiveTimeout
    })
    loading.value = false
  }

  // 重复报单判断判断方法
  const repeatMethod = () => {
    checkList.value = []
    checkList.value.push(form.enableProName)
    checkList.value.push(form.enableProCode)
    checkList.value.push(form.enableProModel)
    checkList.value.push(form.enableUserAccount)
    checkList.value.push(form.enableUserName)
    checkList.value.push(form.enableUserPhone)
    checkList.value.push(form.enableUserAddress)
    let tmp = []
    checkList.value.forEach((item) => {
      if (item) {
        tmp.push(item)
      }
    })
    return tmp
  }

  // 还原旧值
  const returnValue = (type) => {
    switch (type) {
      case 'proName':
        form.enableProName = !form.enableProName
        break
      case 'proCode':
        form.enableProCode = !form.enableProCode
        break
      case 'proModel':
        form.enableProModel = !form.enableProModel
        break
      case 'userAccount':
        form.enableUserAccount = !form.enableUserAccount
        break
      case 'userName':
        form.enableUserName = !form.enableUserName
        break
      case 'userPhone':
        form.enableUserPhone = !form.enableUserPhone
        break
      case 'userAddress':
        form.enableUserAddress = !form.enableUserAddress
        break
    }
  }

  /**
   * 保存工单设置
   * @param type - 保存类型
   */
  const saveSet = async (type: string) => {
    ElMessageBox({
      type: 'warning',
      title: '提示',
      message: '确认修改此设置?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 800)
        } else {
          done()
        }
      },
    })
      .then(() => {
        if (repeatMethod().length < 2) {
          ElMessage({
            message: '请至少选择两个字段进行重复报单判断',
            type: 'warning',
            duration: 2000,
          })
          returnValue(type)
          return
        }
        saveWorkSet(form).then((res) => {
          if (res.data.success == true) {
            ElMessage({
              message: res.data.message,
              type: 'success',
              duration: 2000,
            })
            getSet()
          } else {
            ElMessage({
              message: res.data.message,
              type: 'warning',
              duration: 2000,
            })
            return
          }
        })
      })
      .catch(() => {
        switch (type) {
          case 'all':
            form.selectAllOrder = !form.selectAllOrder
            break
          case 'finish':
            form.finishUpdate = !form.finishUpdate
            break
          case 'repair':
            form.openRepairAuth = !form.openRepairAuth
            break
          case 'repeat':
            form.enableRepeatOrder = !form.enableRepeatOrder
            break
          case 'repMobile':
            form.repeatByMobile = !form.repeatByMobile
            break
          case 'repService':
            form.repeatByService = !form.repeatByService
            break
          case 'repTip':
            form.enableRepeatOrderTip = !form.enableRepeatOrderTip
            break
          case 'repMobileTip':
            form.repeatByMobileTip = !form.repeatByMobileTip
            break
          case 'repServiceTip':
            form.repeatByServiceTip = !form.repeatByServiceTip
            break
          case 'proName':
            form.enableProName = !form.enableProName
            break
          case 'proCode':
            form.enableProCode = !form.enableProCode
            break
          case 'proModel':
            form.enableProModel = !form.enableProModel
            break
          case 'userAccount':
            form.enableUserAccount = !form.enableUserAccount
            break
          case 'userName':
            form.enableUserName = !form.enableUserName
            break
          case 'userPhone':
            form.enableUserPhone = !form.enableUserPhone
            break
          case 'userAddress':
            form.enableUserAddress = !form.enableUserAddress
            break
          case 'reg':
            form.carryRegistInfo = !form.carryRegistInfo
            break
          case 'spare':
            form.showRelationSpare = !form.showRelationSpare
            break
          case 'networkReceive':
            form.networkReceiveTimeout = 2
            break
          case 'networkDispatch':
            form.networkDispatchTimeout = 2
            break
          case 'engineerReceive':
            form.engineerReceiveTimeout = 2
            break
        }
      })
  }

  const timeoutSetSave = _.debounce(
    (type: 'networkReceive' | 'networkDispatch' | 'engineerReceive') => {
      if (form.networkReceiveTimeout <= 2) {
        form.networkReceiveTimeout = 2
      }

      if (form.networkDispatchTimeout <= 2) {
        form.networkDispatchTimeout = 2
      }

      if (form.engineerReceiveTimeout <= 2) {
        form.engineerReceiveTimeout = 2
      }

      saveSet(type)
    },
    100,
  )

  onMounted(() => {
    if (props.active_name == 'set') {
      getSet()
    }
  })

  defineExpose({ getSet })
</script>

<style scoped lang="scss">
  @import '../../index.scss';

  .set {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
</style>
